<template>
  <div class="article">
    <!-- 筛选区域 -->
    <el-card class="top">
      <template #header>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        </el-breadcrumb>
      </template>
      <el-form label-width="100px">
        <el-form-item label="状态：">
          <el-radio-group v-model="form.status">
            <el-radio label="">全部</el-radio>
            <el-radio label="0">草稿</el-radio>
            <el-radio label="1">待审核</el-radio>
            <el-radio label="2">审核通过</el-radio>
            <el-radio label="3">审核失败</el-radio>
            <el-radio label="4">已删除</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="频道：">
          <ChannelsSelect :form="form"></ChannelsSelect>
        </el-form-item>
        <el-form-item label="日期：">
          <el-date-picker
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            v-model="form.picker"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">筛选</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 内容展示区域 -->
    <el-card>
      <div slot="header">根据筛选条件共查询到 {{ total }} 条结果：</div>
      <!-- 表格 -->
      <el-table :data="articleList">
        <el-table-column label="封面" width="150px" height="100px">
          <template v-slot="scope">
            <img :src="scope.row.cover.images" alt="" />
          </template>
        </el-table-column>
        <el-table-column label="标题" prop="title" width="400px">
        </el-table-column>
        <el-table-column label="状态" width="150px">
          <template v-slot="scope">
            <el-tag v-if="scope.row.status === 0" type="info">草稿</el-tag>
            <el-tag v-else-if="scope.row.status === 1">待审核</el-tag>
            <el-tag v-else-if="scope.row.status === 2" type="success">
              审核通过
            </el-tag>
            <el-tag v-else-if="scope.row.status === 3" type="warning">
              审核失败
            </el-tag>
            <el-tag v-else-if="scope.row.status === 4" type="danger">
              已删除
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="发布时间"
          prop="pubdate"
          width="300px"
        ></el-table-column>
        <el-table-column
          label="阅读数"
          prop="read_count"
          width="120px"
        ></el-table-column>
        <el-table-column
          label="评论数"
          prop="comment_count"
          width="120px"
        ></el-table-column>
        <el-table-column
          label="点赞数"
          prop="like_count"
          width="120px"
        ></el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="edit(scope.row.id)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="del(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页导航 -->
      <el-pagination
        @size-change="sizeChange"
        @current-change="pageChange"
        :current-page="form.page"
        :page-sizes="[1, 5, 10, 20, 30]"
        :page-size="form.per_page"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
import { mpArticles, mpArticlesDelete } from '@/api/index.js'
export default {
  name: 'Article',
  data () {
    return {
      form: {
        status: '',
        channel_id: '',
        picker: [],
        begin_pubdate: '',
        end_pubdate: '',
        page: 1,
        per_page: 5
      },
      channelsList: [],
      articleList: [],
      total: 0
    }
  },
  methods: {
    async getArticles () {
      const res = await mpArticles(this.form)
      this.articleList = res.data.results
      this.total = res.data.total_count
    },
    submit () {
      this.form.page = 1
      this.getArticles()
    },
    pageChange (page) {
      this.form.page = page
      this.getArticles()
    },
    sizeChange (size) {
      this.form.per_page = size
      this.form.page = 1
      this.getArticles()
    },
    del (id) {
      this.$confirm('您确认要删除该数据吗？', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await mpArticlesDelete(id)
          this.$message.success('删除成功')
          this.submit()
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    },
    edit (id) {
      this.$router.push('/publish?id=' + id)
    }
  },
  created () {
    this.getArticles()
  },
  watch: {
    'form.picker': {
      handler (newVal) {
        this.form.begin_pubdate = newVal[0]
        this.form.end_pubdate = newVal[1]
      }
    }
  }
}
</script>

<style lang="less" scoped>
.article {
  .top {
    margin-bottom: 40px;

    .el-date-editor {
      ::v-deep .el-range-separator {
        width: 6%;
      }
    }
  }

  .el-table {
    ::v-deep td {
      height: 100px;

      img {
        display: block;
        max-width: 100px;
        max-height: 75px;
      }
    }
  }

  .el-pagination {
    text-align: center;
    margin-top: 30px;
  }
}
</style>
